import Link from "next/link";
import { BookOpen, User, Calendar } from 'lucide-react';
import { getFirstPinyinLetter } from "@/common/pinyin";
import { fetchData } from "@/common/fetch";
import { Key  } from "react";
import PinyinText from "@/components/PinyinText";
type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}
export default async function PoetDetail({ params }: Props) {
 try {
  const {id} = await params;
  const reqData = await fetchData(`/api/poet/find?id=${id}`, { method: "GET" });
  const {data:poet} = reqData;
  // 按首字母分组诗歌
  const poemsByLetter = poet?.poems?.reduce((acc: { [x: string]: { title: string; }[]; }, poem: { title: string; }) => {
    const letter = getFirstPinyinLetter(poem.title);
    if (!acc[letter]) {
      acc[letter] = [];
    }
    acc[letter].push(poem);
    return acc;
  }, {} as Record<string, typeof poet.poems>);

  return (
    <div className="space-y-8 mt-8 p-5 md:p-0">
      <div className="bg-slate-800/50 rounded-xl p-8 border border-slate-700">
        <div className="flex items-start gap-6">
          <div className="p-4 rounded-lg bg-slate-700/50 text-emerald-400">
            <User className="h-12 w-12" />
          </div>
          <div className="flex-1">
            <h1 className="text-3xl font-bold mb-2"><PinyinText text={poet.name} /></h1>
            <div className="flex items-center space-x-4 text-slate-400">
              <span className="flex items-center">
                <Calendar className="h-4 w-4 mr-1" />
                {poet.birthday?new Date(poet.birthday).getFullYear():"未知"} - {poet.deadday?new Date(poet.deadday).getFullYear():"未知"}
              </span>
              <span><PinyinText text={poet.dynasty} /></span>
            </div>
          </div>
        </div>
        <span className="mt-6 text-slate-300 leading-relaxed block"><PinyinText text={poet.life||''} /></span>
      </div>

      <div className="space-y-6">
        <h2 className="text-2xl font-bold flex items-center gap-2">
          <BookOpen className="h-6 w-6 text-emerald-500" />
          <PinyinText text="作品集" />
        </h2>
        
        {poemsByLetter && Object.entries(poemsByLetter).map(([letter, poems]) => (
          <div key={letter} className="space-y-4">
            <h3 className="text-lg font-semibold text-emerald-400">{letter}</h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
              {Array.isArray(poems) && poems.map((poem: { id: Key | null | undefined; title: string }) => (
                <Link
                  key={poem.id}
                  href={`/poem/${poem.id}`}
                  className="p-4 rounded-lg bg-slate-800/30 border border-slate-700 hover:border-emerald-500/50 transition-all"
                >
                  <h4 className="text-lg hover:text-emerald-400"><PinyinText text={poem.title} /></h4>
                </Link>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
 } catch (error) {
  console.log(error);
    return <div>Ooooooooooooooooooooooooooooooops! 私密马赛</div>
 }
}
